<template>
<div class="notices-content">
    <!-- 搜索框 -->
    <div class="search-box">
        <van-search v-model="localSearchText" :placeholder="placeholder" shape="round" background="#f7f8fa"
            @input="onSearchInput" />
    </div>

    <!-- 消息列表 -->
    <div class="message-container">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="!hasMore" finished-text="没有更多了" @load="loadMoreData">
                <div class="message-list">
                    <message-item v-for="(item, index) in filteredList" :key="index" type="notice" :icon="item.icon"
                        :title="item.title" :time="item.time" :message="item.content" @click="readNotice(item)" />

                    <!-- 无数据提示 -->
                    <div class="empty-list" v-if="filteredList.length === 0 && !loading">
                        <van-empty description="暂无系统通知" />
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</div>
</template>

<script>
import MessageItem from '@/components/message/MessageItem.vue'

export default {
    name: 'NoticesContent',
    components: {
        MessageItem
    },
    props: {
        searchText: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '搜索系统通知'
        }
    },
    data() {
        return {
            localSearchText: this.searchText,
            messageList: [],
            loading: false,
            hasMore: true,
            refreshing: false,
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        // 过滤后的消息列表
        filteredList() {
            if (!this.localSearchText) {
                return this.messageList
            }

            const keyword = this.localSearchText.toLowerCase()
            return this.messageList.filter(item =>
                item.title.toLowerCase().includes(keyword) ||
                (item.content && item.content.toLowerCase().includes(keyword))
            )
        }
    },
    watch: {
        searchText(newVal) {
            this.localSearchText = newVal
        }
    },
    created() {
        this.loadInitialData()
    },
    methods: {
        // 加载初始数据
        loadInitialData() {
            if (this.messageList.length === 0) {
                this.loadMoreData()
            }
        },

        // 加载更多数据
        loadMoreData() {
            if (this.loading || !this.hasMore) return

            this.loading = true

            // 模拟API请求
            setTimeout(() => {
                // 模拟数据
                const noticeTypes = ['gift', 'star', 'like', 'setting']
                const noticeIcons = ['gift-o', 'gem-o', 'like-o', 'setting-o']
                const noticeTitles = ['礼品通知', '活动公告', '系统提醒', '设置变更']

                const mockData = Array(10).fill().map((_, index) => {
                    const typeIndex = index % 4
                    return {
                        id: `notice_${this.page}_${index}`,
                        type: noticeTypes[typeIndex],
                        icon: noticeIcons[typeIndex],
                        iconColor: ['#ff6b6b', '#1989fa', '#07c160', '#ff9500'][typeIndex],
                        title: noticeTitles[typeIndex],
                        content: `这是一条系统通知内容 ${this.page}_${index}`,
                        time: `${Math.floor(Math.random() * 72)}小时前`,
                        isRead: index % 3 === 0, // 三分之一已读
                        link: ['/gifts', '/activities', '/likes', '/settings'][typeIndex]
                    }
                })

                this.messageList = [...this.messageList, ...mockData]
                this.page += 1
                this.hasMore = this.page < 5 // 模拟有5页数据
                this.loading = false

            }, 1000)
        },

        // 刷新数据
        onRefresh() {
            // 重置数据
            this.messageList = []
            this.page = 1
            this.hasMore = true

            // 加载新数据
            this.loadMoreData()

            // 完成刷新
            setTimeout(() => {
                this.refreshing = false
            }, 1000)
        },

        // 搜索输入
        onSearchInput() {
            this.$emit('search', this.localSearchText)
        },

        // 阅读通知
        readNotice(notice) {
            // 如果通知未读，则标记为已读
            if (!notice.isRead) {
                notice.isRead = true
                // 这里可以调用API将通知标记为已读
            }

            // 如果有链接则跳转
            if (notice.link) {
                this.$router.push(notice.link)
            }
        }
    }
}
</script>

<style scoped>
.notices-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-box {
    padding: 8px 16px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.message-container {
    flex: 1;
    overflow: hidden;
}

.message-list {
    background-color: #fff;
    padding: 0 16px;
    min-height: calc(100vh - 110px);
}

.empty-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
    .search-box {
        background-color: #1e1e1e;
    }

    .message-list {
        background-color: #1e1e1e;
    }
}
</style>